<template>
	<el-dialog title="查看广告图" :visible.sync="isShow" :close-on-click-modal="false" :before-close="close" width="1200px">
		<div class="form-box">
			<el-form ref="form" :model="form" label-width="120px">
				<el-row>
					<el-col :span="12">
						<el-form-item label="广告图" prop="imageUrl">
							<div>
								<el-image class="ads-image" fit="cover" :src="item.imageUrl" :preview-src-list="[item.imageUrl]"></el-image>
							</div>
						</el-form-item>
					</el-col>
				</el-row>
				
				<el-row>
					<el-col :span="12">
						<el-form-item label="标题" prop="title">
							<el-input v-model="item.title" readonly></el-input>
						</el-form-item>
					</el-col>
					
					<el-col :span="12">
						<el-form-item label="排序" prop="sort">
							<el-input v-model="item.sort" readonly></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				
				<el-row>
					<el-col :span="12">
						<el-form-item label="状态" prop="adStatus">
							<el-input :value="item.adStatus == 1 ? '正常' : '已下架'" readonly></el-input>
						</el-form-item>
					</el-col>
					
					<el-col :span="12">
						<el-form-item label="跳转方式" prop="sort">
							<el-input :value="item.targetType == 0 ? '默认页面' : item.targetType == 1 && item.apiUrl ? '小程序中指定页面' : item.targetType == 2 ? '公众号文章' : item.targetType == 3 ? '指定外部小程序' : '无操作'" readonly></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				
				<el-row v-if="item.targetType == 0">
					<el-col :span="24">
						<el-form-item label="广告内容" prop="content">
							<div v-html="form.content"></div>
						</el-form-item>
					</el-col>
				</el-row>
				
				<el-row v-if="item.targetType == 1">
					<el-col :span="12">
						<el-form-item label="跳转路由地址" prop="frontRoutePath">
							<el-input v-model="item.frontRoutePath" readonly></el-input>
						</el-form-item>
					</el-col>
					
					<el-col :span="12">
						<el-form-item label="接口地址" prop="apiUrl">
							<el-input v-model="item.apiUrl" readonly></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				
				<el-row v-if="item.targetType == 2">
					<el-col :span="24">
						<el-form-item label="公众号文章" prop="content">
							<el-input v-model="form.content" readonly></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>
		
		<div slot="footer">
			<el-button @click="close">关 闭</el-button>
		</div>
	</el-dialog>
</template>

<script>
	import { getCarouselDetail } from '@api/platform/platformBanner'
	export default {
		props: {
			isShow: Boolean,
			id: Number,
			item: Object,
		},
		data() {
			return {
				form: {},
			}
		},
		watch: {
			isShow(val) {
				if(val) {
					this.getDetails();
				}
			}
		},
		methods: {
			getDetails() { //获取广告详情
				getCarouselDetail({adId: this.id})
					.then(res => {
						this.form = res.data;
					})
			},
			
			close() {
				this.$emit('close');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.form-box {
		padding: 20px 30px;
	}
	
	.ads-image {
		width: 100px;
		height: 100px;
		object-fit: cover;
	}
</style>